<template>
    <div class="main-role">
        <div class="side">
            <div :class="{ active: isActive == key ? true :false }" class="text " v-for="(val,key) in roleList" :key="key" @click="getRoleUser(key,val.id)">
                <span>{{val.name}}</span>
            </div>
        </div>
        <div class="people">
            <template>
                <el-table
                        style="height:385px;width: 100%"
                        :data="tableData"
                        row-key="id"
                        @select="handleSelectionChange"
                        @select-all = "selectAll"
                        v-loading="tableLoadding"
                        ref="multipleTable"
                >
                    <el-table-column
                            type="selection"
                            width="55"></el-table-column>
                    <el-table-column
                            prop="true_name"
                            label="姓名"
                            width="70">
                    </el-table-column>
                    <el-table-column
                            prop="username"
                            width="90"
                            label="用户名">
                    </el-table-column>
                    <el-table-column
                            prop="phone"
                            label="用户名">
                    </el-table-column>
                </el-table>
            </template>
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="currentPage1"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>

    </div>
</template>

<script>
    export default {
        props:{
            list:Array
        },
        data(){
            return {
                activeName: 'second',
                roleList:[],
                tableLoadding:true,
                tableData:[],
                total:0,
                isActive:0,
                id:"",
                currentPage1:1
            }
        },
        mounted(){
            this.load()
            console.log(this.list)
        },
        methods: {
            load(){
                $.get("/role/list",{},Response => {
                    if(Response.success){

                        this.roleList = Response.data;

                        // console.log(thi)
                        if(this.roleList.length != 0){
                            this.id = this.roleList[0].id
                            // console.log(this.id)
                            this.getUser(this.currentPage1)

                        }

                        // console.log(this.roleList)
                    }else{
                        this.$message.error("出错");
                    }
                    // console.log(Response)
                })
            },
            handleCurrentChange(){
                console.log(this.id)
                this.getRoleUser(this.currentPage1,this.id)
            },
            getRoleUser(key,id){
                this.isActive = key
                this.id = id
                this.getUser(this.currentPage1)
                // console.log(id)
            },
            getUser(val){
                console.log(this.id)
                this.tableLoadding = true
                let role = {role:[this.id]}
                console.log(role)
                $.post("/user/searchUser",{info:JSON.stringify(role),pre:val},Response => {
                    console.log(Response.data)
                    if(Response.success){
                        this.tableData.length = 0;
                        (Response.data.data || []).forEach(element => {

                            this.tableData.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})

                        })
                        console.log(this.tableData)
                        let selected = []
                        // 不知道为什么 this.toggleSelection(this.list) 不能用 this.toggleSelection([this.tableData[0]]) 可用
                        this.list.forEach( element =>{
                            this.tableData.forEach( val =>{
                                if(JSON.stringify(element) == JSON.stringify(val)){
                                    // 将匹配的tableData内的值写入selected内
                                    selected.push(val)
                                }
                            })

                        })
                        this.toggleSelection(selected)
                        this.total = Response.data.totalRow.count
                        // console.log(this.roleList)
                    }else{
                        this.$message.error("出错");
                    }
                    this.tableLoadding = false
                    // console.log(Response)
                })
            },
            toggleSelection(rows) {

                if (rows) {
                    this.$nextTick(() => {
                        rows.forEach(row => {
                            // console.log(row)
                            this.$refs.multipleTable.toggleRowSelection(row,true);
                        })
                    });

                }
            },
            selectAll(row){
                if(row.length == 0){
                    console.log("取消勾选")
                    for(let element of this.tableData){
                        for(let i = 0; i<this.list.length;i++){
                            if(this.list[i].id == element.id){
                                this.list.splice(i,1)
                            }
                        }
                    }
                }else{
                    console.log("勾选")
                    for(let element of row){
                        if(JSON.stringify(this.list).indexOf(JSON.stringify({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})) == -1){
                            this.list.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})

                        }
                    }
                }
            },
            handleSelectionChange(val,ty) {
                console.log(val,ty)
                let item = 0
                if(ty != null){

                    for(let i = 0; i<this.list.length;i++){
                        if(this.list[i].id == ty.id){
                            // console.log(213)
                            this.list.splice(i,1)
                            item = 1
                        }
                    }
                    if(!item){
                        if(JSON.stringify(this.list).indexOf(JSON.stringify({true_name:ty.true_name,id:ty.id,username:ty.username,phone:ty.phone})) == -1){
                            this.list.push({true_name:ty.true_name,id:ty.id,username:ty.username,phone:ty.phone})

                        }

                    }
                    return ;
                }


                if(val){
                    val.forEach(element => {
                        if(this.list.length != 0){

                            if(JSON.stringify(this.list).indexOf(JSON.stringify({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})) == -1){
                                this.list.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})

                            }

                        }else{

                            this.list.push({true_name:element.true_name,id:element.id,username:element.username,phone:element.phone})
                        }



                    });

                }

            }
        }
    }
</script>

<style scoped lang="less">
.main-role{
    height:65vh;
    display: flex;

    .side{
        height:100%;
        width:40%;
        overflow: auto;
        .text{
            margin:5px 0;
            cursor: pointer;
        }
    }
    .people{
        width:60%;
    }
}
    .active{
        background-color: #f0f7ff;
    }
</style>